<h1>Callbacks</h1>
<p>
  Below is a list of all callbacks available to Calendar date select. all callbacks are executed from the context of the input element it is bound to ( so, this.value will give you the value of the form element)
</p>
<dl>
    <dt>before_show / after_show</dt>

    <dt>before_close / after_close</dt>

    <dt>after_navigate</dt>
    <dd>Called when navigating to a different month. Passes first parameter as a date object refering to the current month viewed</dd>

    <dt>onchange</dt>
    <dd>Called when the form input value changes</dd>
  </li>
</dl>
<hr clear='all' />
<div style="float:left; ">
  <%= calendar_date_select_tag "event_demo", "",
    :before_show => "log('Calendar Showing');" ,
    :after_show => "log('Calendar Shown');" ,
    :before_close => "log('Calendar closing');" ,
    :after_close => "log('Calendar closed');",
    :after_navigate => "log('Current month is ' + (param.getMonth()+1) + '/' + (param.getFullYear()));",
    :onchange => "log('value changed to - ' + $F(this));"
  %>
</div>
<div style="float:right">
  <h2>Output</h2>
  <textarea id="event_output" style="background-color: black; width:500px; height:200px; color:white"></textarea>
</div>
<br clear='both'/>
<script type="text/javascript" charset="utf-8">
  //<![CDATA[
    function log(output)
    {
      $('event_output').value += output + "\n";
      $('event_output').scrollTop=1000000000
    }
  //]]>
</script>
<pre>
&lt;%= calendar_date_select_tag "event_demo", "",
:before_show => "log('Calendar Showing');" ,
:after_show => "log('Calendar Shown');" ,
:before_close => "log('Calendar closing');" ,
:after_close => "log('Calendar closed');",
:after_navigate => "log('Current month is ' + (param.getMonth()+1) + '/' + (param.getFullYear()));",
:onchange => "log('value changed to - ' + $F(this));"
%&gt;

</pre>
<hr />
<h2>Using callbacks to prevent date from being selected</h2>
<p>One application of callbacks is to prevent the user from selecting dates in the past.</p>
